<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'mood/plugin/dropzone/dist/dropzone.css' %}">
    <script src="{% static 'mood/js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static 'mood/plugin/dropzone/dist/dropzone.js'%}"></script>
</head>
<body>
<p>请上传身份照正反面照片</p>
        <form id="filedropzone" method="post" action="{{ request.path }}" class="dropzone dz-clickable" >{% csrf_token %}
            <div class="dz-default dz-message">
                <div class="dz-icon icon-wrap icon-circle icon-wrap-md">
                    <i class="fa fa-cloud-upload fa-3x"></i>
                </div>
                <div>
                    <p class="dz-text">把证件信息拖放到这里</p>
                    <p class="text-muted">最多可上传2张照片</p>
                </div>
            </div>
        </form>

<!--------------------------------------------------------------->
<script>
$(document).ready(function () {
    $("#filedropzone").dropzone({
        url: "{% url 'upload' %}",
        maxFiles: 5,
        maxFilesize: 1024,
        acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
        autoProcessQueue: false,
        paramName: "file",
        dictDefaultMessage: "拖入需要上传的文件",
        init: function () {
            var myDropzone = this, submitButton = document.querySelector("#qr"),
                    cancelButton = document.querySelector("#cancel");
            myDropzone.on('addedfile', function (file) {
                //添加上传文件的过程，可再次弹出弹框，添加上传文件的信息
            });
            myDropzone.on('sending', function (data, xhr, formData) {
                //向后台发送该文件的参数
                formData.append('watermark', jQuery('#info').val());
            });
            myDropzone.on('success', function (files, response) {
                //文件上传成功之后的操作
            });
            myDropzone.on('error', function (files, response) {
                //文件上传失败后的操作
            });
            myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {
                //progress为进度百分比
                $("#pro").text("上传进度：" + parseInt(progress) + "%");
                //计算上传速度和剩余时间
                var mm = 0;
                var byte = 0;
                var tt = setInterval(function () {
                    mm++;
                    var byte2 = bytes;
                    var remain;
                    var speed;
                    var byteKb = byte / 1024;
                    var bytesKb = bytes / 1024;
                    var byteMb = byte / 1024 / 1024;
                    var bytesMb = bytes / 1024 / 1024;
                    if (byteKb <= 1024) {
                        speed = (parseFloat(byte2 - byte) / (1024) / mm).toFixed(2) + " KB/s";
                        remain = (byteKb - bytesKb) / parseFloat(speed);
                    } else {
                        speed = (parseFloat(byte2 - byte) / (1024 * 1024) / mm).toFixed(2) + " MB/s";
                        remain = (byteMb - bytesMb) / parseFloat(speed);
                    }
                    $("#dropz #speed").text("上传速率：" + speed);
                    $("#dropz #time").text("剩余时间" + arrive_timer_format(parseInt(remain)));
                    if (bytes >= byte) {
                        clearInterval(tt);
                        if (byteKb <= 1024) {
                            $("#dropz #speed").text("上传速率：0 KB/s");
                        } else {
                            $("#dropz #speed").text("上传速率：0 MB/s");
                        }
                        $("#dropz #time").text("剩余时间：0:00:00");
                    }
                }, 1000);
            });
            submitButton.addEventListener('click', function () {
                //点击上传文件
                myDropzone.processQueue();
            });
            cancelButton.addEventListener('click', function () {
                //取消上传
                myDropzone.removeAllFiles();
            });
        }
    });
//剩余时间格式转换：
    function arrive_timer_format(s) {
        var t;
        if (s > -1) {
            var hour = Math.floor(s / 3600);
            var min = Math.floor(s / 60) % 60;
            var sec = s % 60;
            var day = parseInt(hour / 24);
            if (day > 0) {
                hour = hour - 24 * day;
                t = day + "day " + hour + ":";
            }
            else t = hour + ":";
            if (min < 10) {
                t += "0";
            }
            t += min + ":";
            if (sec < 10) {
                t += "0";
            }
            t += sec;
        }
        return t;
    }
})
</script>
</body>
</html>